<template>
	<div class="formLogin">
		<h2 style="text-align: center;font-size: 40px;line-height: 60px;">xxx</h2>
		<a-form-model id="components-form-demo-normal-login" ref="ruleForm" :model="info" :rules="rules"
			class="login-form" @validate='getTrue'>
			<a-form-model-item has-feedback prop="name">
				<a-input placeholder="请输入账号" v-model="info.name">
					<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
				</a-input>
			</a-form-model-item>
			<a-form-model-item has-feedback prop="password">
				<a-input-password placeholder="请输入密码" allow-clear v-model="info.password">
					<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
				</a-input-password>
			</a-form-model-item>
			<a-form-model-item>
				<a-button type="primary" html-type="submit" @click="onSubmit" class="login-form-button"
					:disabled="!(button.name&&button.password)" :loading="iconLoading">
					登录
				</a-button>
			</a-form-model-item>
		</a-form-model>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					name: '',
					password: '',
				},
				button: {
					name: false,
					password: false
				},
				iconLoading:false,
				rules: {
					name: [
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在3-5之间', trigger: ['change', 'blur'] },
					],
					password: [{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在3-5之间', trigger: ['change', 'blur'] },
					],
				},
			}
		},
		methods: {
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.iconLoading=true
						this.$store.dispatch('user/login',this.info).then((res)=>{
							this.$router.push({name:'/'},()=>{})
							this.iconLoading=false
						})
					}
				})
			},
			getTrue(name, b) {
				this.button[name] = b
			},
		},
	};
</script>
<style>
	#components-form-demo-normal-login .login-form {
		max-width: 300px;
	}

	#components-form-demo-normal-login .login-form-forgot {
		float: right;
	}

	#components-form-demo-normal-login .login-form-button {
		width: 100%;
	}
</style>
<style scoped lang="scss">
	.formLogin {
		padding: 20px;
		width: 320px;
		height: 350px;
		background-color: rgba(0, 0, 0, 0.1);
		box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/deep/ .ant-input,
	/deep/ .has-error .ant-input-affix-wrapper .ant-input,
	/deep/ .has-error .ant-input-affix-wrapper .ant-input:hover,
	/deep/ .has-error .ant-input {
		background-color: transparent;
	}
</style>
